<template>
  <div class="index">
    <MyHeader></MyHeader>
    <main class="container">
      <CitySearch></CitySearch>

      <MyChart></MyChart>
    </main>
  </div>
  <router-view />
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import MyHeader from '@/components/header/MyHeader.vue'
import CitySearch from '@/components/main/CitySearch.vue'
import MyChart from '@/components/main/MyChart.vue'

const router = useRouter()
</script>

<style lang="scss" scoped>
.index {
  --tw-bg-opacity: 1;
  background-color: rgb(0 102 138 / var(--tw-bg-opacity));
  flex-direction: column;
  min-height: 100vh;
  display: flex;

  .container {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
    max-width: 1536px;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 10rem;
    padding-left: 10rem;
  }
}
</style>

.saved-cities { margin-top: 2rem; h3 { margin-bottom: 1rem; font-size: 1.25rem;
font-weight: 600; } .city-list { display: flex; flex-direction: column; gap:
0.5rem; .city-item { display: flex; justify-content: space-between; align-items:
center; padding: 0.75rem 1rem; background-color: rgba(0, 78, 113, 0.8);
border-radius: 0.25rem; span { font-size: 1rem; } .city-actions { display: flex;
gap: 0.5rem; button { padding: 0.25rem 0.5rem; border: none; border-radius:
0.125rem; cursor: pointer; font-size: 0.875rem; } .view-btn { background-color:
#007bff; color: white; } .remove-btn { background-color: #dc3545; color: white;
} } } } }
